<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="../../../component/pear/css/pear.css" />
</head>
<body>
<form class="layui-form" action="" lay-filter="form-filter">
	<div class="mainBox">
		<div class="main-container">
			<div class="layui-tab layui-tab-card">
				<ul class="layui-tab-title">
					<li class="layui-this">基本详情</li>
					<li>套餐课程</li>
					<li>套餐详情</li>
					<li>相关信息</li>
				</ul>
				<div class="layui-tab-content">
					<div class="layui-tab-item layui-show">
						<div>
							<div class="layui-form-item layui-hide">
								<label class="layui-form-label required">ID</label>
								<div class="layui-input-block">
									<input type="text" name="id" class="layui-input" disabled>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label required">套餐名称</label>
								<div class="layui-input-block">
									<input type="text" name="name" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label required">套餐类型</label>
								<div class="layui-input-block">
									<select name="type" lay-verify="required"></select>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label required">原价</label>
								<div class="layui-input-block">
									<input type="number" name="originalPrice" required lay-verify="required" value="0" placeholder="" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label required">销售价</label>
								<div class="layui-input-block">
									<input type="number" name="salePrice" required lay-verify="required" value="0" placeholder="" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">成本价</label>
								<div class="layui-input-block">
									<input type="number" name="costPrice" value="" placeholder="" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label required">排序号</label>
								<div class="layui-input-block">
									<input type="number" name="sort" required lay-verify="required" value="0" placeholder="" autocomplete="off" class="layui-input">
								</div>
							</div>
						</div>
					</div>
					<div class="layui-tab-item">
						<table id="course-table" lay-filter="course-table"></table>
					</div>
					<div class="layui-tab-item">内容-3</div>
					<div class="layui-tab-item">内容-4</div>
				</div>
			</div>

		</div>
	</div>
	<div class="bottom">
		<div class="button-container">
			<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit="" lay-filter="submit-filter">
				<i class="layui-icon layui-icon-ok"></i>提交
			</button>
			<button type="reset" class="pear-btn pear-btn-sm">
				<i class="layui-icon layui-icon-refresh"></i>重置
			</button>
		</div>
	</div>
</form>
<script type="text/html" id="operationTpl">
	<a href="javascript:void(0);" lay-event="delete" class="operation-link delete-link">删除</a>
</script>
<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script>
	layui.use(['form','table', 'jquery', 'vtlForm', 'dict'], function() {
		let form = layui.form;
		let table = layui.table;
		let $ = layui.jquery;
		let vtlForm = layui.vtlForm;
		let dict = layui.dict;
		let url = layui.url();
		let id = url.search.id;

		let cols = [[
			{ type: 'checkbox', hide: true },
			{ field: 'name', title: '课程名称',  width: 180 },
			{ field: 'type', title: '课程类型' , width: 100 },
			{ field: '', title: '所属分类' , width: 120 },
			{ field: '', title: '课时' , width: 80 },
			{ field: 'sort', title: '排序', width: 70 },
			{ field: 'operation', title: '操作', fixed: 'right',toolbar: '#operationTpl'}
		]];

		table.render({
			elem: '#course-table',
			url: "/crm/course/page?coursePackageId="+id,
			request: {
				pageName: 'pageNo', // 页码的参数名称，默认：page
				limitName: 'pageSize' // 每页数据条数的参数名，默认：limit
			},
			parseData: function(res) {
				let total = !$.vtl.isBlank(res.data)? res.data.total : 0;
				let list = !$.vtl.isBlank(res.data)? res.data.list : [];
				return {
					"code": 0,
					"msg": 'SUCCESS',
					"count": total,
					"data": list
				};
			},
			page: true,
			cols: cols,
			skin: 'grid',
			height: 'full-148'
		});

		table.on('tool(course-table)', function(obj) {
			let row = obj.data;
			switch (obj.event) {
				case 'delete':
					window.delete(obj);
					break;
				default:
					break;
			}
		});

		window.delete = function(obj) {
			let param = {'id':id,'courseIds':Array.of(obj.data.id)}
			layer.confirm('确定删除？', { icon: 3, title: '提示' }, function(index) {
				layer.close(index);
				$.post('/crm/course-package/delete-course',JSON.stringify(param), function(result) {
					if (result.code == 0) {
						window.refresh(true);
					}
				});
			});
		}

		window.refresh = function(field = {}, deep = false) {
			field.coursePackageId = id;
			$.vtl.tableReloadData('course-table', field, deep);
		}

		form.on('submit(submit-filter)', function(data) {
			if(id) {
				$.put('/crm/course-package/update', JSON.stringify(data.field), function(result) {
					if (result.code == 0) {
						$.vtl.closeLayer();
						parent.refresh();
					}
				});
			} else {
				$.post('/crm/course-package/create', JSON.stringify(data.field), function(result) {
					if (result.code == 0) {
						$.vtl.closeLayer();
						parent.refresh();
					}
				});
			}

			return false;
		});

		window.init = function(id) {
			vtlForm.initSelectByDict('form select[name=type]', 'crm_course_package_type');

			if(id) {
				$.get('/crm/course-package/get?id=' + id, function(result) {
					form.val("form-filter", result.data);
				});
			}

		}

		window.init(id);
	})
</script>
</body>
</html>
